<template>
  <div class="chart-section glass-panel">
    <div class="chart-header">
      <h3>流量监测</h3>
      <div class="chart-actions">
        <el-button-group>
          <el-button size="small" class="glass-button">日</el-button>
          <el-button size="small" class="glass-button">周</el-button>
          <el-button size="small" class="glass-button">月</el-button>
        </el-button-group>
      </div>
    </div>
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref<HTMLElement>()
let chart: echarts.ECharts | null = null

const initChart = () => {
  if (!chartRef.value) return
  
  chart = echarts.init(chartRef.value)
  const option = {
    grid: {
      top: 10,
      right: 10,
      bottom: 20,
      left: 40,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
      axisLine: {
        lineStyle: { color: 'rgba(255,255,255,0.2)' }
      },
      axisLabel: { color: 'rgba(255,255,255,0.6)' }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: { color: 'rgba(255,255,255,0.2)' }
      },
      splitLine: {
        lineStyle: { color: 'rgba(255,255,255,0.1)' }
      },
      axisLabel: { color: 'rgba(255,255,255,0.6)' }
    },
    series: [{
      data: [320, 280, 250, 340, 380, 300],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#6f42c1'
      },
      lineStyle: {
        width: 3,
        color: '#6f42c1'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(111,66,193,0.3)' },
          { offset: 1, color: 'rgba(111,66,193,0)' }
        ])
      }
    }]
  }
  chart.setOption(option)
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (chart) {
    chart.dispose()
    chart = null
  }
  window.removeEventListener('resize', handleResize)
})

const handleResize = () => {
  if (chart) {
    chart.resize()
  }
}
</script>

<style lang="scss" scoped>
.glass-panel {
  background: rgba(13, 19, 35);
  border-radius: 4px;
  border: 1px solid rgba(63, 158, 255, 0.1);
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      rgba(63, 158, 255, 0) 0%,
      rgba(63, 158, 255, 0.3) 50%,
      rgba(63, 158, 255, 0) 100%
    );
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      rgba(63, 158, 255, 0) 0%,
      rgba(63, 158, 255, 0.3) 50%,
      rgba(63, 158, 255, 0) 100%
    );
  }
}

.chart-section {
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    h3 {
      color: rgba(255, 255, 255, 0.9);
      font-size: 16px;
      margin: 0;
    }

    .chart-actions {
      .glass-button {
        background: rgba(63, 158, 255, 0.1);
        border: 1px solid rgba(63, 158, 255, 0.2);
        color: rgba(255, 255, 255, 0.8);
        
        &:hover {
          background: rgba(63, 158, 255, 0.2);
          border-color: rgba(63, 158, 255, 0.3);
        }
      }
    }
  }

  .chart-container {
    height: 200px;
  }
}
</style> 